<template>
  <div class="_wz_Identification">
    <Card dis-hover :bordered="true">
      <template #title>搜索</template>
      <Form ref="formSearch" :model="formDataSearch" label-position="right" :label-width="100" inline>
        <FormItem label="辨识部位">
          <i-input v-model="formDataSearch.dangerPositionName" placeholder="请填写辨识部位" clearable />
        </FormItem>
        <FormItem label="部位类型">
          <i-select v-model="formDataSearch.dangerPositionType" filterable placeholder="请选择部位类型" clearable>
            <Option v-for="item in positionTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </i-select>
        </FormItem>
        <FormItem label="完成状态">
          <i-select v-model="formDataSearch.dangerEstimatePositionFinish" filterable placeholder="请选择完成状态" clearable>
            <Option :value="1">已完成</Option>
            <Option :value="0">未完成</Option>
          </i-select>
        </FormItem>
        <FormItem label="经营企业">
          <i-input v-model="formDataSearch.deptName" placeholder="请输入经营企业" clearable />
        </FormItem>
        <FormItem>
          <Button type="primary" @click="searchSubmit">搜索</Button>
        </FormItem>
      </Form>
    </Card>
    <Card dis-hover :bordered="true" style="height: 100%;overflow: hidden;margin: 10px 0 0;">
      <template #title>列表</template>
      <wzTbale ref="wzTbale" :tableData="tableData"></wzTbale>
    </Card>



    <Drawer :title="formTitle" v-model="formOperation" width="1100" :draggable="true">
      <IdentificationDetails v-if="formOperation" :selectData="selectData"></IdentificationDetails>
    </Drawer>

  </div>
</template>
<script>


import {resolveComponent,getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex


import wzTbale from "../../../components/table/index.vue";
import {systemDictList} from "../../../util/commonInterfaces.js";//字典接口
import IdentificationDetails from "../hazardRisk/IdentificationDetails.vue";//企业详情

//reactive
export default defineComponent({
  name: 'Identification',//组件名称
  components: {
    wzTbale,//表格
    IdentificationDetails,//企业详情
  },//组件引用
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用

    // 用于获取$refs
    const wzTbale = ref();


    const state = reactive({
      formDataSearch:{type:1},//搜索条件
      positionTypeList: [
        { value: 1, label: '基础管理' },
        { value: 2, label: '设备设施' },
        { value: 3, label: '作业活动' },
      ],
      tableData: {
        url: apiUrl.dangerEstimateDangerEstimatePositionList,//请求地址
        method: 'post',//请求方式
        where: {type:1},//搜索条件
        height: '100%',//表格高度 auto
        page: true,//分页是否使用
        columns: [//表头数据

          {type: 'index', width: 70, align: 'center', title: '序号'},
          {title: '辨识部位', minWidth: 160, key: 'deptName',tooltip:true,resizable: true,render: (h, params) => {
              return h('span', !!params.row.dangerPositionName ? params.row.dangerPositionName : "--")
            }},

          {title: '计划状态', minWidth: 140,tooltip:true,resizable: true, render: (h, params) => {
              if(params.row.dangerEstimatePositionFinish == 1) {
                return h(resolveComponent('Tag'), {type:"dot",color: 'success'}, '审核完成');
              }else if (params.row.dangerEstimatePositionProcess == 0) {
                return h(resolveComponent('Tag'), {type:"dot",color: '#eee'}, '未派发');
              }else if(params.row.dangerEstimatePositionProcess == 1){
                if(params.row.dangerItemAnalyseState==-1){
                return h(resolveComponent('Tag'), {type:"dot",color: 'error'}, '评价退回');
                }else if(params.row.dangerItemIdentifyState==1){
                return h(resolveComponent('Tag'), {type:"dot",color: 'warning'}, '等待辨识');
                }
              }else if(params.row.dangerEstimatePositionProcess == 2){
                if(params.row.dangerItemAuditState==-1){
                return h(resolveComponent('Tag'), {type:"dot",color: 'error'}, '审核退回');
                }else if(params.row.dangerItemAnalyseState==1){
                return h(resolveComponent('Tag'), {type:"dot",color: 'success'}, '等待评价');
                }
              }else if(params.row.dangerEstimatePositionProcess == 3){
                if(params.row.dangerItemAuditState==1){
                return h(resolveComponent('Tag'), {type:"dot",color: 'success'}, '等待审核');
                }
              }
            }
          },
          {title: '部位类型', minWidth: 140,tooltip:true,resizable: true, render: (h, params) => {
              if (params.row.dangerPositionType == 1) {
                return h(resolveComponent('Tag'), {type:"dot",color: 'primary'}, '基础管理');
              }else if(params.row.dangerPositionType == 2){
                return h(resolveComponent('Tag'), {type:"dot",color: 'warning'}, '设备设施');
              }else if(params.row.dangerPositionType == 3){
                return h(resolveComponent('Tag'), {type:"dot",color: 'success'}, '作业活动');
              }
            }
          },
          {title: '特种设备', minWidth: 140,tooltip:true,resizable: true, render: (h, params) => {
              if (params.row.dangerPositionDeviceState == 0) {
                return h(resolveComponent('Tag'), {type:"dot",color: 'warning'}, '否');
              }else if(params.row.dangerPositionDeviceState == 1){
                return h(resolveComponent('Tag'), {type:"dot",color: 'primary'}, '是');
              }
            }
          },
          {title: '辨识计划', minWidth: 200,tooltip:true,resizable: true, key: 'deptName',render: (h, params) => {
              return h('span', !!params.row.dangerEstimateName ? params.row.dangerEstimateName : "--")
            }},
          {title: '时间范围', minWidth: 180,tooltip:true,resizable: true, render: (h, params) => {
              return h('span', params.row.dangerEstimateStartDate + ' 至 ' + params.row.dangerEstimateEndDate)
            }
          },
          {title: '辨识部门', minWidth: 130,tooltip:true,resizable: true, key: 'dangerItemIdentifyInOrgName',render: (h, params) => {
              return h('span', !!params.row.dangerItemIdentifyInOrgName ? params.row.dangerItemIdentifyInOrgName : "--")
            }},
          {title: '辨识人', minWidth: 130,tooltip:true,resizable: true, key: 'dangerItemIdentifyUserName',render: (h, params) => {
              return h('span', !!params.row.dangerItemIdentifyUserName ? params.row.dangerItemIdentifyUserName : "--")
            }},

          {title: '辨识时间', minWidth: 190,tooltip:true,resizable: true, render: (h, params) => {
              return h('span', !!params.row.dangerItemIdentifyTime ? params.row.dangerItemIdentifyTime : "--")
            }
          },
          {title: '责任部门', minWidth: 130,tooltip:true,resizable: true, key: 'dangerPositionInOrgName',render: (h, params) => {
              return h('span', !!params.row.dangerPositionInOrgName ? params.row.dangerPositionInOrgName : "--")
            }},

          {title: '责任人', minWidth: 130,tooltip:true,resizable: true, key: 'dangerPositionInUserName',render: (h, params) => {
              return h('span', !!params.row.dangerPositionInUserName?params.row.dangerPositionInUserName : "--")
            }},
          {title: '经营企业', minWidth: 260,tooltip:true,resizable: true, key: 'deptName',render: (h, params) => {
              return h('span', !!params.row.deptName ? params.row.deptName : "--")
            }},
          {title: '经营类型', minWidth: 130,tooltip:true,resizable: true, key: 'deptName',render: (h, params) => {
              return h('span', !!params.row.deptTransportName ? params.row.deptTransportName : "--")
            }},
          {title: '创建时间', minWidth: 190,tooltip:true,resizable: true,key: 'createTime' },
          {title: '修改时间', minWidth: 190,tooltip:true,resizable: true,key: 'updateTime' },
          {
            title: '操作', fixed: 'right', width:100,
            render: (h, params) => {
              var operationButtons = [];

              operationButtons.push(
                  h('span', {
                    style: {"color": "#2d8cf0", "cursor": "pointer"},
                    onClick: () => {
                      state.formTitle = '风险辨识';
                      state.selectData = JSON.parse(JSON.stringify(params.row));
                      state.formOperation = true;
                    }
                  }, "查看")
              )
              return operationButtons;
            }
          },
        ],
        pagingParameters:{// 分页参数
          page:'pageNo',
          limit:'pageSize'
        },
        format: {//返回数据格式
          list: ['data'],//数据list
          count: ['count'],//数据总量
        },
      },


      selectData:{},//选中数据
      formOperation:false,//弹框状态
      formTitle:'',//弹框标题
    });



    //搜索方法
    const searchSubmit = ()=>{
      let formDataSearch = JSON.parse(JSON.stringify(state.formDataSearch));
      state.tableData.where = formDataSearch;
      wzTbale.value.tableLoadData(true)

    }




    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (async() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")

    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      searchSubmit,//搜索方法
      wzTbale,// ref 使用 封装的表格
    }
  }
})


</script>
<style lang="less">
._wz_Identification{
  padding: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;

  .ivu-card-body {
    height: calc(100% - 51px);
  }
}
</style>
